<template>
  <el-dialog v-model="dialogVisible" title="导入" width="80%">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="header-center">
              <b>报关单</b>
            </div>
          </template>
          <UploadComponent
            ref="uploadRef1"
            action="http://111.229.78.177:8000/api/file.Upload/image?app_id=10001"
            :limit="3"
            accept=".png"
            tipText="请上传1mb以下的图片文件"
            @ocrData="handleOcrData"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <div class="header-center">
              <b>增值税发票</b>
            </div>
          </template>
          <UploadComponent
            ref="uploadRef2"
            action="http://111.229.78.177:8000/api/file.Upload/image?app_id=10001"
            :limit="3"
            accept=".png"
            tipText="请上传1mb以下的图片文件"
            @ocrData="handleOcrData"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加间距 -->
    <div style="margin-top: 40px;"></div> <!-- 间隔区域 -->

    <el-form label-width="170px">
      <el-row :gutter="20">
        <!-- 遍历字段生成输入框，从左到右排列 -->
        <el-col :span="8" v-for="(field, index) in fields" :key="index">
          <el-form-item :label="field.label" :required="field.required">
            <el-input v-if="!field.select" v-model="form[field.prop]" />
            <el-select v-else v-model="form[field.prop]">
              <el-option v-for="opt in field.options" :key="opt" :label="opt" :value="opt" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-header">
      <el-button type="primary" @click="addRow">+ 添加商品</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column prop="name" label="商品名称" :min-width="180">
        <template #default="{ row, $index }">
          <el-input v-model="row.name" />
        </template>
      </el-table-column>
      <el-table-column prop="code" label="商品编码" :min-width="180">
        <template #default="{ row, $index }">
          <el-input v-model="row.code" />
        </template>
      </el-table-column>
      <el-table-column prop="spec" label="规格" :min-width="180">
        <template #default="{ row, $index }">
          <el-input v-model="row.spec" />
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量" :min-width="120">
        <template #default="{ row, $index }">
          <el-input v-model="row.quantity" />
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" :min-width="120">
        <template #default="{ row, $index }">
          <el-input v-model="row.unit" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="报关单价" :min-width="120">
        <template #default="{ row, $index }">
          <el-input v-model="row.price" />
        </template>
      </el-table-column>
      <el-table-column label="操作" :min-width="150">
        <template #default="{ row, $index }">
          <el-button type="danger" @click="removeRow($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24">
        <el-button type="success" @click="submitData" style="width: 100%;">提交</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import UploadComponent from './Upload.vue';
import axios from 'axios';

export default {
  components: {
    UploadComponent
  },
  setup() {
    const dialogVisible = ref(false);
    const form = ref({
      title: "中华人民共和国海关进口货物报关单",
      number: "722020231201001237",
      pre_entry_number: "722020231201001237",
      customs_number: "722020231201001237",
      domestic_consignee: "金华峥嵘进出口有限公司",
      entry_port: "友谊关",
      import_date: "20230116",
      declaration_date: "20230117",
      foreign_shipper: "ANKHANG LIMITED LIABILITY COMPANY",
      transport_mode: "公路运输",
      transport_tool_name_and_trip_number: "NYKU7011876/2023011510183",
      consignment_number: "72202023011510183",
      storage_location: "凭祥友谊关综合保税区",
      consumer_unit: "四川胡牌贸易有限公司",
      supervision_mode: "一般贸易",
      exemption_type: "一般征税",
      departure_port: "越南",
      contract_number: "AK21591",
      trade_country: "越南",
      departure_country: "越南",
      stopover_port: "友谊关(越南)",
      port_of_entry: "凭祥友谊关通道",
      packaging_type: "纸制或纤维板制盒/箱",
      package_count: "1247",
      gross_weight: "21822.5",
      net_weight: "18705",
      transaction_type: "CIF",
      attached_documents: "随附单证1:原产地证书<02>VN-CN23/08/000590随附单证2:原产地证据文件;植物检疫证书;发票;提/运单",
      remarks: "备注:<总担保290022ACCB0000900012>南凭友谊关装箱单编号:AK21591N/M集装箱标箱数及号码:2;NYKU7011876;",
      special_relationship_confirmation: "否",
      price_impact_confirmation: "否",
      royalty_fee_confirmation: "否",
      price_formula_confirmation: "否",
      provisional_price_confirmation: "否",
      self_reported_and_paid: "是",
      declaration_staff_certificate: "72107541",
      declaration_company: "(91451481MAA7BE2R3A)广西鼎悦兴国际物流有限公司"
    });
    const uploadedFiles = ref([]);

    const fields = ref([
      { label: '报关单号', prop: 'number' },
      { label: '预录入编号', prop: 'pre_entry_number' },
      { label: '海关编号', prop: 'customs_number' },
      { label: '境内收货人', prop: 'domestic_consignee' },
      { label: '进境关别', prop: 'entry_port' },
      { label: '进口日期', prop: 'import_date' },
      { label: '申报日期', prop: 'declaration_date' },
      { label: '境外发货人', prop: 'foreign_shipper' },
      { label: '运输方式', prop: 'transport_mode' },
      { label: '运输工具名称及航次号', prop: 'transport_tool_name_and_trip_number' },
      { label: '提运单号', prop: 'consignment_number' },
      { label: '货物存放地点', prop: 'storage_location' },
      { label: '消费使用单位', prop: 'consumer_unit' },
      { label: '监管方式', prop: 'supervision_mode' },
      { label: '征免性质', prop: 'exemption_type' },
      { label: '启运港', prop: 'departure_port' },
      { label: '合同协议号', prop: 'contract_number' },
      { label: '贸易国别', prop: 'trade_country' },
      { label: '启运国别', prop: 'departure_country' },
      { label: '经停港', prop: 'stopover_port' },
      { label: '入境口岸', prop: 'port_of_entry' },
      { label: '包装种类', prop: 'packaging_type' },
      { label: '件数', prop: 'package_count' },
      { label: '毛重', prop: 'gross_weight' },
      { label: '净重', prop: 'net_weight' },
      { label: '成交方式', prop: 'transaction_type' },
      { label: '随附单证', prop: 'attached_documents' },
      { label: '备注', prop: 'remarks' },
      { label: '特殊关系确认', prop: 'special_relationship_confirmation' },
      { label: '价格影响确认', prop: 'price_impact_confirmation' },
      { label: '特许权使用费确认', prop: 'royalty_fee_confirmation' },
      { label: '价格影响确认', prop: 'price_formula_confirmation' },
      { label: '暂定价格确认', prop: 'provisional_price_confirmation' },
      { label: '自报自缴', prop: 'self_reported_and_paid' },
      { label: '申报人员证件号', prop: 'declaration_staff_certificate' },
      { label: '申报单位', prop: 'declaration_company' },
    ]);

    const tableData = ref([
      { name: '', code: '', spec: '', quantity: '', unit: '', price: '' },
    ]);

    const addRow = () => {
      tableData.value.push({ name: '', code: '', spec: '', quantity: '', unit: '', price: '' });
    };

    const removeRow = (index) => {
      tableData.value.splice(index, 1);
    };

    const handleOcrData = (map, table) => {
      // 将 OCR 数据填入表格中
      tableData.value = table.map(item => ({
        name: item['商品名称及规格型号'],
        code: item['商品编号'],
        spec: item['商品名称及规格型号'],
        quantity: item['数量及单位'],
        unit: item['数量及单位'],
        price: item['单价/总价/币制']
      }));
    };

    const submitData = async () => {
      try {
        const response = await axios.post('http://localhost:8000/api/ocr.Declaration/save?app_id=10001', {
          map: form.value,
          table: tableData.value
        });
        console.log('提交成功', response.data);
        // 处理提交成功后的逻辑
      } catch (error) {
        console.error('提交失败', error);
        // 处理提交失败后的逻辑
      }
    };

    const accept = '.png';

    return {
      dialogVisible,
      form,
      uploadedFiles,
      fields,
      tableData,
      addRow,
      removeRow,
      accept,
      handleOcrData,
      submitData
    };
  }
};
</script>

<style scoped>
.header-center {
  text-align: center;
}
.table-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>